<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebSocket 支持的 MQTT 网页客户端</title>
  <script src="./mqtt.min.js"></script>
</head>

<body>
  <h2 data_temp_dwid='1' style="text-align:center">WebSocket 支持的 MQTT 网页客户端</h2>
  <div id="connection">
    <form id="connection_form" name="connection_form" method="POST">
      <h3>连接服务器</h3>

      <b>主机地址</b><input type="text" name="hostIP" id="host" value="47.93.197.229">
      <b>端口: </b><input type="text" name="hostPort" id="port" value="8083">
      <b>Path: </b><input type="text" name="hostPath" id="path" value="/mqtt"><br>

      <b>用户名: </b><input type="text" name="username" id="username" value="guest">
      <b>密码: </b><input type="text" name="passwd" id="passwd" value="zucc201"><br>

      <input type="button" value="连接" onclick="connection()" id="on">
      <input type="button" value="断开连接" onclick="disconnect()" disabled="disabled" id="off"><br>

      <b>当前连接状态: </b><b id="info" style="color:blue">未连接</b>
    </form>
  </div><br>
  <div id="pub" style="background-color: #99ffcc;height :100%;width:50%;float:left;">
    <h3 style="padding-left: 20px;">推送</h3>
    <form style="padding-left: 20px;">
      <b>Topic:</b>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="pub_topic" id="pub_topic" value="zyy/1214"><br>
      <b>Payload:</b><input type="text" name="pub_payload" id="pub_payload" value="IoT实验10: WebSocket MQTT 网页客户端"><br>
      <b>Qos:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="pub_qos" id="pub_qos">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>&nbsp;&nbsp;<input type="button" value="确认推送" id="pub_button" disabled="disabled" onclick="pub()">
    </form>
    <table width="100%" border="1" id="pub_Tb1">
      <tbody>
        <tr>
          <th scope="col" name="topic">Topic</th>
          <th scope="col" name="payload">Payload</th>
          <th scope="col" name="qos">Qos</th>
        </tr>
      </tbody>
    </table>
  </div>
  <div id="sub" style="background-color:#77bdff;height:100%;width:50%;float:left;">
    <h3 style="padding-left: 20px;">订阅</h3>
    <form style="padding-left: 20px;">
      <b>Topic:</b>&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name="sub_topic" id="sub_topic" value="zyy/1214"><br>
      <b>Qos:</b>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<select name="sub_qos" id="sub_qos">
        <option value="0" selected>0</option>
        <option value="1">1</option>
        <option value="2">2</option>
      </select>&nbsp;&nbsp;
      <input type="button" value="订阅" id="sub_on_button" disabled="disabled" onclick="sub_on()">
      <input type="button" value="取消订阅" id="sub_off_button" disabled="disabled" onclick="sub_off()">
    </form><br>
    <table width="100%" border="1" id="sub_Tb1">
      <tbody>
        <tr>
          <th scope="col" name="topic">Topic</th>
          <th scope="col" name="payload">Payload</th>
          <th scope="col" name="qos">Qos</th>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<script src="./ws_mqtt.js"></script>

</html>